<template>
  <div :style="{backgroundImage: 'url(' + bg + ')'}" class="box">
    <!-- 卡片视图 -->
    <div style="color:white" class="box-card">
      <section>
        <div>较上日+ {{ store.chinaAdd.localConfirmH5 }}</div>
        <div style="color:#e57631;">{{ store.chinaTotal.localConfirm }}</div>
        <div>本土现有确诊</div>
      </section>
      <section>
        <div>较上日+ {{ store.chinaAdd.nowConfirm }}</div>
        <div style="color:#be2121;">{{ store.chinaTotal.nowConfirm }}</div>
        <div>现有确诊</div>
      </section>
      <section>
        <div>较上日+ {{ store.chinaAdd.confirm }}</div>
        <div style="color:#9a60b4;">{{ store.chinaTotal.confirm }}</div>
        <div>累计确诊</div>
      </section>
      <section>
        <div>较上日+ {{ store.chinaAdd.noInfect }}</div>
        <div style="color:#ca3f81;">{{ store.chinaTotal.noInfect }}</div>
        <div>无症状感染者</div>
      </section>
      <section>
        <div>较上日+ {{ store.chinaAdd.importedCase }}</div>
        <div style="color:#5470c6;">{{ store.chinaTotal.importedCase }}</div>
        <div>境外输入</div>
      </section>
      <section>
        <div>较上日+ {{ store.chinaAdd.dead }}</div>
        <div style="color:#5a7793;">{{ store.chinaTotal.dead }}</div>
        <div>累计死亡</div>
      </section>
    </div>
    <!-- 中国地图 -->
    <div id="china" class="box-map"></div>
    <!-- 详情面板 -->
    <div style="color:white" class="box-table">
      <table class="table" cellspacing="0" border="1">
        <thead>
          <tr>
            <th align="left">地区</th>
            <th align="left" style="color:#be2121;">新增确诊</th>
            <th align="left" style="color:#9a60b4;">累计确诊</th>
            <th align="left" style="color:#62b565;">治愈</th>
            <th align="left" style="color:#5a7793;">死亡</th>
          </tr>
        </thead>
        <transition-group enter-active-class="animate__animated animate__fadeIn" tag="tbody">
          <tr :key="item.name" v-for="(item, index) in store.item">
            <td align="left">{{ item.name }}</td>
            <td align="left" :style="item.today.confirm !== 0 ? 'color:red;font-weight:bold' : ''">
              {{ item.today.confirm }}
            </td>
            <td align="left">{{ item.total.confirm }}</td>
            <td align="left">{{ item.total.heal }}</td>
            <td align="left">{{ item.total.dead }}</td>
          </tr>
        </transition-group>
      </table>
    </div>
    <!-- 饼图 -->
    <div style="color:white" id="pie" class="box-pie"></div>
    <!-- 折线图 -->
    <div style="color:white" id="line" class="box-line"></div>
  </div>
</template>
  
<script setup>
import bg from "./assets/bg.png";
import './assets/china' // 地图文件
import { geoCoordMap } from './assets/geoMap' // 地图坐标
import { useStore } from './stores' //store
import * as echarts from 'echarts' //echarts 5
import 'animate.css' //动画
import { onMounted } from 'vue';
import { debounce } from "@/utils/common.js"

const store = useStore()

onMounted(async () => {
  await store.getList()
  initCharts()
  initPie()
  initLine()
})

// 地图
const initCharts = () => {
  const city = store.list.diseaseh5Shelf.areaTree[0].children;
  store.item = city[1].children
  const data = city.map(v => {
    return {
      name: v.name,
      value: geoCoordMap[v.name].concat(v.total.nowConfirm),
      children: v.children
    }
  })
  const charts = echarts.init(document.querySelector('#china'))
  /** @type EChartsOption */
  charts.setOption({
    geo: {
      map: "china",
      aspectScale: 0.8,
      layoutCenter: ["50%", "50%"],
      layoutSize: "100%",
      itemStyle: {
        areaColor: {
          type: "linear-gradient",
          x: 0,
          y: 1200,
          x2: 1000,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: "#152E6E", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "#0673AD", // 50% 处的颜色
            },
          ],
          global: true, // 缺省为 false
        },
        shadowColor: "#0f5d9d",
        shadowOffsetX: 0,
        shadowOffsetY: 15,
        opacity: 0.5,
      },
      regions: [
        {
          name: "南海诸岛",
          itemStyle: {
            areaColor: "rgba(0, 10, 52, 1)",
            borderColor: "rgba(0, 10, 52, 1)",
            opacity: 0,
          },
          label: {
            show: false,
            color: "#FFFFFF",
            fontSize: 12,
          },
        },
      ],
    },
    series: [
      {
        type: "map",
        map: "china",
        aspectScale: 0.8,
        layoutCenter: ["50%", "50%"], //地图位置
        layoutSize: "100%",
        label: {
          show: true,
          color: "#FFFFFF",
          fontSize: 12,
        },
        itemStyle: {
          areaColor: "#0c3653",
          borderColor: "#1cccff",
          borderWidth: 1.8,
        },
        emphasis: {
          label: {
            show: true,
            color: "#fff",
          },
        },
        data: data,
      },
      {
        type: 'scatter',
        coordinateSystem: 'geo',
        symbol: 'pin',
        symbolSize: [45, 45],
        label: {
          show: true,
          color: "#fff",
          formatter(value) {
            return value.data.value[2]
          }
        },
        itemStyle: {
          color: '#1E90FF', //标志颜色
        },
        data: data,
      },
    ],
  })
  charts.on('click', (e) => {
    store.item = e.data.children
    console.log("地图点击事件", e);
  })
  window.addEventListener("resize",
    // 防抖,防止频繁调用
    debounce(() => {
      charts.resize();
    }, 1000)
  )
}

// 饼图
const initPie = () => {
  const charts = echarts.init(document.querySelector('#pie'))
  /** @type EChartsOption */
  charts.setOption({
    title: {
      text: '新增确诊',
      backgroundColor: '#fff',
      textStyle: {
        color: '#000',
        fontSize: 20,
      },
    },
    backgroundColor: "#223651",
    tooltip: {
      trigger: 'item'
    },
    series: [
      {
        type: 'pie',
        radius: ['40%', '70%'],
        itemStyle: {
          borderRadius: 4,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: true,
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '15',
          }
        },
        data: store.cityDetail.map(v => {
          return {
            name: v.province + ' ' + v.city,
            value: v.nowConfirm
          }
        })
      }
    ]
  })
  window.addEventListener("resize",
    // 防抖,防止频繁调用
    debounce(() => {
      charts.resize();
    }, 1000)
  )
}

// 折线图
const initLine = () => {
  // 初始化dom对象
  const charts = echarts.init(document.querySelector('#line'))
  charts.setOption({
    backgroundColor: "#223651",
    // 居中设置
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: store.cityDetail.map(v => v.province + ' ' + v.city),
      axisLine: {
        lineStyle: {
          color: "#fff"
        }
      }
    },
    yAxis: {
      type: 'value',
      axisLine: {
        lineStyle: {
          color: "#fff"
        }
      }
    },
    label: {
      show: true
    },
    series: [
      {
        data: store.cityDetail.map(v => v.nowConfirm),
        type: 'line',
        smooth: true
      }
    ]
  })
  // 监听窗口变化
  window.addEventListener("resize",
    // 防抖,防止频繁调用
    debounce(() => {
      charts.resize();
    }, 1000)
  )
}

</script>
  
<style lang="less" scoped>
@itemColor: #41b0db;
@itemBg: #223651;
@itemBorder: #212028;

.table {
  width: 100%;
  background: #212028;
  // box-sizing: border-box;

  tr {

    th {
      padding: 10px;
      white-space: nowrap;
      font-size: 20px;
      font-weight: bold;
      border: 1px solid #000;
    }

    td {
      padding: 10px;
      white-space: nowrap;
      border: 1px solid #000;
    }
  }
}

.box {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  box-sizing: border-box;

  &-card {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr); // 3列
    grid-template-rows: repeat(2, 1fr); // 2行

    // 当 屏幕宽度 > 800px 时，布局改变
    @media screen and(min-width: 800px) {
      grid-template-columns: repeat(6, 1fr); // 6列
      grid-template-rows: 1fr; // 1行
    }

    // 当 屏幕宽度 < 400px 时，布局改变
    @media screen and(max-width: 400px) {
      grid-template-columns: repeat(2, 1fr); // 2列
      grid-template-rows: repeat(3, 1fr); // 3行
    }

    section {
      background: @itemBg;
      border: 1px solid @itemBorder;
      padding: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;

      div {
        white-space: nowrap;
      }

      div:nth-child(2) {
        padding: 10px;
        font-size: 20px;
        font-weight: bold;
      }
    }
  }

  &-pie {
    width: 100%;
    height: 400px;
  }

  &-line {
    width: 100%;
    height: 400px;
  }

  &-map {
    width: 100%;
    height: 500px;
  }

  &-table {
    width: 100%;
    overflow: auto;
  }
}
</style>